<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>活动 - {$config.WEB_SITE_TITLE}</title>
    <script src="__PUBLIC__/Home/js/mui.min.js"></script>
    <link href="__PUBLIC__/Home/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="__PUBLIC__/Home/css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="__PUBLIC__/Home/css/reset.css">
    <link rel="stylesheet" href="__PUBLIC__/Home/css/h-huodong.css">
    <script src="__PUBLIC__/Home/js/adaptive.js"></script>
    <script src="__PUBLIC__/Home/js/device.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/Home/css/btm.css">



    <style>
        .swiper-slide img{width: 100%;}
        .btm li:nth-child(1) a{color: #01B0B8;z-index: 100!important;}
        .home{z-index: 1!important;}
        .mui-content .mui-pull-bottom-pocket  .mui-pull-caption{
            position: fixed;!important;
            bottom: 1.8rem;!important;
            left: 40%;
        }
        html,body{width: 100%;height: 100%;}
        .mui-content .mui-pull-bottom-pocket .mui-pull-loading{
            position: fixed;!important;
            bottom: 1.8rem;!important;
            left: 30%;
        }



    </style>
</head>
<body>


<!--顶部栏-->
<div class="seach">
    <form action="#">
        <img src="__PUBLIC__/Home/img/h-diwen.png" alt="" class="h-wz">
        <span class="weizhi">郑州</span>
        <img src="__PUBLIC__/Home/img/sou2.png" alt="" class="sub">
        <img src="__PUBLIC__/Home/img/back-left.png" alt="" class="back">
    </form>
</div>


<div class="home  pullrefresh mui-scroll-wrapper mui-content">
    <div class="mui-scroll cont">
        <!--轮播区域-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="__PUBLIC__/Home/img/banner1.png" alt="">
                </div>
                <div class="swiper-slide"><img src="__PUBLIC__/Home/img/banner1.png" alt="">
                </div>
                <div class="swiper-slide"><img src="__PUBLIC__/Home/img/banner1.png" alt="">
                </div>

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>


        <ul class="nav">
            <li>  <a href="{:U('Activity/qinzi',array('type'=>1))}">亲子游<img src="__PUBLIC__/Home/img/p-hdfl-1.png" alt=""></a></li>
            <li><a href="{:U('Activity/qinzi',array('type'=>2))}">周边户外<img src="__PUBLIC__/Home/img/p-hdfl2.png" alt=""></a></li>
            <li><a href="{:U('Activity/qinzi',array('type'=>3))}">冬夏令营<img src="__PUBLIC__/Home/img/p-hdfl3.png" alt=""></a></li>
            <li><a href="{:U('Activity/qinzi',array('type'=>4))}">演出票务<img src="__PUBLIC__/Home/img/p-hdfl4.png" alt=""></a></li>
            <li><a href="{:U('Activity/qinzi',array('type'=>5))}">课程体验<img src="__PUBLIC__/Home/img/p-hdfl5.png" alt=""></a></li>
            <li><a href="{:U('Activity/qinzi',array('type'=>6))}">沙龙讲座<img src="__PUBLIC__/Home/img/p-hdfl6.png" alt=""></a></li>
            <li><a href="{:U('Activity/qinzi',array('type'=>7))}">慈善公益<img src="__PUBLIC__/Home/img/p-hdfl7.png" alt=""></a></li>
            <li><a href="{:U('Activity/more')}">更多<img src="__PUBLIC__/Home/img/h-2.5.png" alt=""></a></li>
        </ul>

        <div style="clear: both"></div>

        <div class="zhoumo">
            <a>
                <p class="danhang">周末去哪玩</p>
                <span class="danhang">孩子们都去玩什么</span>
                <img src="__PUBLIC__/Home/img/zm.png" alt="">
            </a>
            <a>
                <p class="danhang">爸妈推荐区</p>
                <span class="danhang">精明之选震撼来袭</span>
                <img src="__PUBLIC__/Home/img/zm2.png" alt="">
            </a>
            <a>
                <p class="danhang">最新榜单</p>
                <span class="danhang">全场热门TOP榜</span>
                <img src="__PUBLIC__/Home/img/zm3.png" alt="">
            </a>
        </div>





        <div class="tuijian">
            <h4>附近活动
                <img src="__PUBLIC__/Home/img/fanhui2.png" alt="">
            </h4>
        </div>
        <ul class="tj-list">
           <volist name="acs" id="vo">
            <li>
                <a href="{:U('Activity/detail',array('id'=>$vo[id]))}">
                    <img src="{$vo.pic}" alt="" class="tj-show">
                    <p class="duohang">{$vo.title}</p>
                    <nav><span>{$vo.location}</span> <span>{$vo.age}岁</span> <span>￥{$vo.money}</span></nav>
                </a>
            </li>
        </volist>

        </ul>


        <div style="clear:both"></div>

        <div class="more">

        </div>



    </div>

</div>

<script src="__PUBLIC__/Home/js/jquery-1.11.1.js"></script>
<script src="__PUBLIC__/Home/js/swiper-3.4.2.min.js"></script>
<script>
    $(".back").click(function () {
        window.history.back(-1);
    })
    $(".sub").click(function () {
        window.location.href="search.html"
    })
</script>
<script>

    var swiper = new Swiper('.swiper-container', {
        autoplay:3000,
        loop:true,
        pagination: '.swiper-pagination',

    });

    var swipers = new Swiper('.swiper-notice', {
        direction: 'vertical',
        autoplay : 3000,
        loop : true,

    });

    var swiper2 = new Swiper('.swiper_second2', {
        slidesPerView: 1.5,

        centeredSlides: false,
        // 如果需要分页器


    });

</script>


<script>
    mui('body').on('tap', 'a', function () { document.location.href = this.href; });
    // window.addEventListener('touchmove', fn, { passive: false });
    mui.init({
        pullRefresh : {
            container:".pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
            down : {
                height:50,//可选,默认50.触发下拉刷新拖动距离,
                auto: false,//可选,默认false.自动下拉刷新一次

                contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                callback :pulldownRefresh,//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            },
            up : {
                height : 50,
                auto : false,
                contentrefresh : "正在加载...",
                contentnomore : '没有更多数据了',
                contentup:"上拉加载更多",
                callback : pullupRefresh
            }
        }
    });
    //下拉刷新
    function pulldownRefresh() {
        setTimeout(function() { //三秒后执行函数
            window.location.reload();//刷新
            mui('.pullrefresh').pullRefresh().endPulldownToRefresh(); //用来停止刷新
        }, 1000);
    }
    //上拉加载
    function pullupRefresh() {
        var self = this;
        setTimeout(function() {
            var ul = self.element.querySelector('.more');
            var html = ''
            jQuery(ul).append(html);

        }, 1000);


        setTimeout(function() { //3秒后执行函数
            //停止刷新（加载）

            mui('.pullrefresh').pullRefresh().endPullupToRefresh(false);
            // mui('.pullrefresh').pullRefresh().endPullupToRefresh(true);//true加载的那个会变成，没有更多数据了
        }, 1000);
    }

    // mui.ajax("请求url", {
    //     type: "get",
    //     dataType: "json",
    //     data:{
    //         param:param,
    //         name:name
    //     },
    //     success: function(data){
    //         //将获取到的数据动态赋值给列表，假设scroller为滚动容器
    //         //如果数据不到一页，显示“没有更多数据了”,关闭上拉功能
    //         //scroller.endPullupToRefresh(true);
    //         //scroller.querySelector(".mui-pull-bottom-pocket .mui-pull-caption").innerHTML = "没有更多数据了";
    //         //如果对于关闭的上拉功能，可以通过以下语句重置上拉加载功能。
    //         //mui('#pullrefresh').pullRefresh().refresh(true);
    //     }
    // });





</script>
</body>
</html>